<template>
	<view class="flex_ZC">
		<!-- #ifdef H5 || MP-WEIXIN -->
		<uNavbar title="确认订单" bgColor="#F5F7F5"> </uNavbar>
		<!-- #endif -->
		
		<view class="address" v-if="addressInfo">
			<view class="address_top flex_dq">
				<text class="f30 c3">{{addressInfo.name}}</text>
				<text class="f30 c3"><u--text mode="phone" :text="addressInfo.phone" format="encrypt"></u--text></text>
				<text class="defaults" v-if="addressInfo.is_default">默认</text>
				<text class="company" v-if="addressInfo.tag == 0">家</text>
				<text class="company" v-if="addressInfo.tag == 1">公司</text>
				<text class="company" v-if="addressInfo.tag == 2">学校</text>
			</view>
			<view class="address_detail">
				<text class="f26 c3 overflow2">{{addressInfo.full_location}}{{addressInfo.address}}</text>
			</view>
			<view class="change_address" @click="changeAddress">
				<text>更换地址</text>
			</view>
		</view>

		<view class="address pd2024" v-else>
			<view class="address_top flex_Z" @click="changeAddress">
				<view class=" flex_ld">
					<text class="f30 c3">暂无收货地址</text>
					<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
				</view>
				<view class=" flex_ld">
					<text class="f28 c6">去添加收货地址</text>
				</view>
			</view>
		</view>

		<u-toast ref="uToast" />
		<view class="cartList" v-for="(item,index) in cartlist" :key="item.shopId">
			<view class="shopHead flex_dq">
				<text class="f26 c3">{{item.name}}</text>
			</view>
			<view class="googs_box flex_dq" v-for="(item1,index1) in item.goods_list" :key="item1.id">
				<view class="mainImg">
					<image :src="item1.image" mode="aspectFill"></image>
				</view>
				<view class="cartItemContent  flex_Z">
					<view class="centont  f30 c3">
						<text>{{item1.goods.name}}</text>
					</view>
					<view class="centont  f24 c9">
						<text>{{item1.spec_text}}</text>
					</view>
					<view class="centont f30 c3">
						<text>￥{{item1.price}}</text>
						<text>×{{item1.num}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="coupon flex_ld">
			<view class="coupon_l flex_dq">
				<text class="f30 c3">获得More值</text>
			</view>
			<view class="coupon_r flex_dq">
				<text class="f32 c3 fw7">+ {{summary.gift_integral}}</text>
			</view>
		</view>

		<view class="coupon flex_ld">
			<view class="coupon_l flex_dq">
				<image :src="baseUrl +'/static/icon/i_dk.png'" mode="aspectFill"></image>
				<text class="f30 c3">使用More券抵扣</text>
			</view>
			<view class="coupon_r flex_dq" @click="changeCoupons">
				<text v-if="isMoney" class="f28 c3">本单可使用{{dikouMoney}}</text>
				<image v-if="!isMoney" class="checkboxHead" :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill">
					<image v-else class="checkboxHead" :src="baseUrl +'/static/icon/i_xz.png'" mode="aspectFill">
					</image>
			</view>
		</view>

		<view class="coupon mart28 flex_Z">
			<view class="coupon_l flex_dq">
				<image :src="baseUrl +'/static/icon/greenintegral1.png'" mode="aspectFill"></image>
				<text class="f30 c3">权益生效规则</text>
			</view>
			<view class="xuanze mart28 flex_ld" v-for="(item,index) in ruleList" :key="index"
				@click="changeRule(item.id)">
				<text class="f28 c3">{{item.name}}</text>
				<image v-if="ruleId == item.id" class="checkboxHead" :src="baseUrl +'/static/icon/i_xz.png'"
					mode="aspectFill"></image>
				<image v-else class="checkboxHead" :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill"></image>
			</view>
		</view>

		<view class="coupon mart28 flex_ld">
			<view class="coupon_l flex_dq">
				<text class="f30 c3">运费</text>
			</view>
			<view class="coupon_r flex_dq">
				<text class="f28 c3">+ {{summary.freight}}</text>
			</view>
		</view>
		<view class="empty3"></view>

		<view class="settlement flex_ld">
			<view class=" flex_dq">
				<text class="f28 c3">合计：</text>
				<text class="f48 c4 fw5">{{totalPrice}}</text>
			</view>
			<text class="submit" @click="isPlaceOrder">提交订单</text>
		</view>

		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">是否添加支付密码？</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="tipShow = false">取消</text>
					<text @click="goPayPwd">确定</text>
				</view>
			</view>
		</u-popup>

		<u-keyboard ref="uKeyboard" dotDisabled mode="number" bgColor="transparent" closeOnClickOverlay :tooltip="false"
			:show="keyboardShow" @close="isClose" @change="changePwd" @backspace="backspace">
			<view class="keyboardss flex_ZC">
				<u-code-input dot space="26" :maxlength="6" v-model="securityPwd"></u-code-input>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	import {
		confirmcart
	} from "../../api/shoppingCart.js"
	import {
		cloudCreate,
		trial
	} from "../../api/cloudMall.js"
	import {
		myuser
	} from "../../api/user.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				securityPwd: '', //密码
				userMoney: '',
				totalPrice: 0,
				dikouMoney: '0.000',
				isMoney: true, //切换
				keyboardShow: false,
				tipShow: false,
				secreShow: false, //免密
				ruleId: 1, //权益id
				ruleList: [{
						id: 1,
						name: '确认收货7天后自动获得',
						state: 1
					},
					{
						id: 2,
						name: '支付成功立即生效 (仅支持七天无理由换货)',
						state: 0
					},
				],
				orderInfo: {},
				summary: {}, //总结
				addressInfo: [], //地址
				selectProcuct: [], //选择商品id
				cartlist: [], //商品
				orderGoods: [], //商品规格
			}
		},
		onLoad() {
			this.selectProcuct = uni.getStorageSync('getAllVal').selectProcuct || [];
			// console.log(this.selectProcuct);
			this.initDetail()
		},
		onShow() {
			this.tipShow = false
			// console.log(uni.getStorageSync('replaceAddress'));
			if (uni.getStorageSync('replaceAddress')) {
				this.addressInfo = uni.getStorageSync('replaceAddress')
			}
			if (uni.getStorageSync('token')) {
				this.userInfo()
			}
		},
		watch: {
			securityPwd(newValue) {
				console.log(newValue.length);
				if (newValue.length >= 6) {
					this.keyboardShow = false
					this.goPayment()
				}
			}
		},
		// computed: {
		// 	// 计算总价
		// 	totalPrice() {
		// 		if(this.isMoney){
		// 			if((Number(this.summary.pay_price) - Number(this.userMoney)).toFixed(2)>0){
		// 				return (Number(this.summary.pay_price) - Number(this.userMoney)).toFixed(2)
		// 			}else{
		// 				return "0.00"
		// 			}
		// 		}else{
		// 			return Number(this.summary.pay_price).toFixed(2)
		// 		}
		// 	},
		// },
		methods: {
			// 个人信息
			userInfo() {
				myuser().then(res => {
					console.log('个人信息', res)
					if (res.code == 1) {
						this.userMoney = res.data.money
						this.secreShow = res.data.secret_free
						if (Number(this.userMoney) == 0) {
							this.isMoney = false
						}
						this.payPasword = res.data.is_pay_pasword
					}
				})
			},

			//购物车下单 
			initDetail() {
				let data = {
					address_id: 0,
					cart_id: this.selectProcuct
				};
				confirmcart(data).then(res => {
					console.log('购物车下单', res)
					if (res.code == 1) {
						this.orderInfo = res.data
						this.cartlist = res.data.seller
						this.addressInfo = res.data.user_address
						this.summary = res.data.summary

						let goodsInfo = [];
						this.cartlist.forEach((item1, idnex1) => {
							item1.goods_list.forEach((item2, index2) => {
								console.log(item2);
								goodsInfo.push({
									sku_id: item2.id,
									number: item2.num
								})
							})
						})
						this.orderGoods = goodsInfo
						this.obtainMoney()
					}else{
						setTimeout(function() {
							uni.navigateBack()
						}, 1500);
					}
				})
			},
			// 订单试算
			obtainMoney() {
				let data = {
					type: '1',
					goods: this.orderGoods,
					is_money: this.isMoney ? 1 : 0,
					address_id: this.addressInfo.id,
				}
				console.log(data);
				trial(data).then(res => {
					console.log('获取价格', res)
					if (res.code == 1) {
						this.totalPrice = res.data.pay_price
						this.dikouMoney = res.data.deduction_amount
					}
				})
			},

			// 去支付
			goPayment() {
				let token = uni.getStorageSync('token');
				if (token) {
					let data = {
						type: '1',
						remark: '',
						is_money: this.isMoney ? 1 : 0,
						goods: this.orderGoods,
						address_id: this.addressInfo.id,
						pay_password: this.securityPwd,
						equity_selected: this.ruleId,
					}
					console.log(data);
					cloudCreate(data).then(res => {
						console.log('支付', res)
						if (res.code == 1) {
							this.payShow = false
							if (res.data.status == 1) {
								uni.navigateTo({
									url: '/pagesMy/cloudCat/paymentCenter?id=' + res.data.id +
										'&totalPrice=' + this.totalPrice+'&type=1'
								})
								return
							}
						} else {
							// 清空密码
							this.securityPwd = ''
						}
					})
				} else {
					uni.navigateTo({
						url: '/pageLogin/login/login'
					})
				}
			},
			// 更换地址
			changeAddress() {
				uni.navigateTo({
					url: '/pageUser/myuser/addresslist?changeState=' + true
				})
			},
			// 去支付密码页面
			goPayPwd() {
				uni.navigateTo({
					url: '/pageUser/myuser/amendsafepassword'
				})
			},
			// 提交订单
			isPlaceOrder() {
				// #ifdef MP-WEIXIN || MP-ALIPAY
				if (this.addressInfo) {
					if (this.payPasword) {
						if (this.isMoney) {
							if (this.secreShow) {
								this.goPayment()
							} else {
								this.keyboardShow = true
								this.payShow = false
							}
						} else {
							this.goPayment()
						}

					} else {
						this.payShow = false
						this.tipShow = true
					}
				} else {
					uni.$u.toast('请添加收货地址!')
				}
				// #endif
				// #ifdef H5
				if (this.addressInfo) {
				
						if (this.isMoney) {
							// if (this.secreShow) {
							// 	this.goPayment()
							// } else {
							// 	this.keyboardShow = true
							// 	this.payShow = false
							// }
							this.goPayment()
						} else {
							this.goPayment()
						}

					
				} else {
					uni.$u.toast('请添加收货地址!')
				}
				// #endif

			},


			// 关闭键盘
			isClose() {
				this.keyboardShow = false
			},
			// 输入密码
			changePwd(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				if (this.securityPwd.length < 6) {
					this.securityPwd += val;
					console.log(this.securityPwd);
				} else {
					console.log('超出不累计');
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.securityPwd.length) this.securityPwd = this.securityPwd.substr(0, this.securityPwd.length - 1);
				console.log(this.securityPwd);
			},
			// 选用抵扣券
			changeCoupons() {
				this.isMoney = !this.isMoney
				this.obtainMoney()
			},
			// 选择权益
			changeRule(id) {
				console.log(id);
				this.ruleId = id
			},
		},
		onUnload() {
			console.log('触发卸载');
			uni.removeStorageSync("replaceAddress")
		},
	}
</script>

<style scoped>
	.address {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-top: 50rpx;
		padding: 30rpx 24rpx;
	}

	.pd3024 {
		padding: 30rpx 24rpx;
	}

	.pd2024 {
		padding: 20rpx 24rpx;
	}

	.address_top>text {
		margin-right: 16rpx;
	}

	.defaults {
		width: 74rpx;
		height: 36rpx;
		text-align: center;
		font-size: 24rpx;
		color: #ffffff;
		background: #FFC300;
		border-radius: 8rpx;
	}

	.company {
		width: 74rpx;
		height: 36rpx;
		text-align: center;
		font-size: 24rpx;
		color: #ffffff;
		background: #65A3FF;
		border-radius: 8rpx;
	}

	.address_detail {
		margin-top: 20rpx;
	}

	.change_address {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
	}

	.change_address>text {
		width: 162rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFC300;
		border-radius: 40rpx;
		border: 1rpx solid #FFC300;
	}

	.shopHead>image {
		width: 38rpx;
		height: 38rpx;
		border-radius: 50%;
		margin-right: 14rpx;
	}

	.cartList {
		background-color: #ffffff;
		width: 92%;
		margin-top: 24rpx;
		border-radius: 20rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
	}

	.checkboxHead {
		width: 36rpx;
		height: 36rpx;
	}

	.googs_box {
		width: 100%;
		margin: 16rpx 0;
	}

	.goods_xz {
		width: 60rpx;
	}

	.goods_xz>image {
		width: 24rpx;
		height: 24rpx;
	}

	.cartItemContent {
		width: 490rpx;
		/* height: 160rpx; */
		/* padding: 5rpx 0; */
	}

	.mainImg {
		background-color: #f6f6f6;
		border-radius: 20rpx;
		width: 120rpx;
		height: 120rpx;
		margin-right: 24rpx;
	}

	.mainImg>image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.centont {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 4rpx 0;
	}

	.coupon {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx 24rpx;
		margin-top: 24rpx;
	}

	.coupon_l>image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 18rpx;
	}

	.checkboxHead {
		width: 36rpx;
		height: 36rpx;
		margin-left: 12rpx;
	}

	.settlement {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 142rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
	}

	.xuanze {
		width: 100%;
	}

	.mart28 {
		margin-top: 28rpx;
	}

	.submit {
		width: 242rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		font-size: 32rpx;
		background: #FFC300;
		text-align: center;
		border-radius: 40rpx;
	}


	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}

	.prompt_ntm>text:nth-child(1) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border: 1rpx solid #FFC300;
		border-radius: 40rpx;
		color: #FFC300;
	}

	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #FFC300;
		border-radius: 40rpx;
		color: #ffffff;
	}

	/deep/.u-number-box__minus {
		width: 24px !important;
		height: 24rpx;
		border: 1rpx solid #999999;
		border-radius: 8rpx !important;

	}

	/deep/.u-number-box__plus {
		width: 24px !important;
		border: 1rpx solid #999999;
		border-radius: 8rpx !important;
	}


	.keyboardss {
		width: 750rpx;
		padding: 30rpx 0;
		background: #ffffff;
	}
</style>